<template>
  <view class="category">
    <scroll-view scroll-y class="left noScorll" :scroll-top="scrolly">
      <view class="title">
        <view :class="{active:index === activeIndex}" v-for="(item,index) in categoryList" :key="item.categoryId" @click.stop="getLabelList(index,item)">{{item.name}}</view>
      </view>
    </scroll-view>
    <scroll-view scroll-y class="right">
      <view class="tag">
        <view v-for="item in labelList" :key="item.labelId" @click.stop="clickLabel(item)">{{item.name}}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import api from '@/api/course.js'
  import {ref,onMounted,getCurrentInstance,reactive,nextTick} from 'vue'
  import {onNavigationBarButtonTap} from '@dcloudio/uni-app'
  
  const categoryList = ref([])
  const labelList = ref([])
  const activeIndex = ref(0)
  const scrolly = ref(0)
  const state = reactive({
    searchPageParams:{
      
    }
  })
  const {proxy} = getCurrentInstance()
  const props = defineProps({
    infoValue:{
      type:Object,
      default:()=>{}
    }
  })
  const emit = defineEmits(['searchByLabel'])
  
  onMounted(()=>{
    getList()
  })
  // 获取数据
  const getList = async ()=>{
    const {data} = await api.getCategoryList()
    categoryList.value = data
    // 判断是否是搜索页面的点击展示全部分类
    if(props.infoValue){
      state.searchPageParams = props.infoValue
      // 给非全部分类的所有分类的标签加上  不限  标签
      categoryList.value.forEach(item => {
        item.labelList = [{labelId:0,name:'不限',categoryName:item.name,categoryId:item.categoryId},...item.labelList]
      })
      // 在左侧列表插入第一个元素显示为全部分类
      categoryList.value = [{categoryId:0,name:'全部分类'},...categoryList.value]
      // 获取设置对应的分类激活
      activeIndex.value = props.infoValue.activeIndex > -1 ? props.infoValue.activeIndex + 1 : props.infoValue.activeIndex
       if(props.infoValue.activeIndex == undefined) activeIndex.value = 0
      // 获取到对应的标签信
      
       labelList.value = categoryList.value[activeIndex.value].labelList
        // nextTick(()=>{
        //    scrolly.value = activeIndex.value * 80
        // })
       return
    }else{
       labelList.value = categoryList.value[0].labelList
    }
    
    
    
  }
  // 获取分类对应的标签数据以及激活效果
  const getLabelList = (index,item)=>{
    activeIndex.value = index
    
    if(item.name === '全部分类') {
      console.log(item);
      searchPageChangeLabel(item)
    }
    
    labelList.value = item.labelList
  }
  // 标签点击事件
  const clickLabel = (item)=>{
    // 判断是否作为搜索页的子标签
    if(props.infoValue){
      
      searchPageChangeLabel(item)
      return
    }
    
    
    const params = JSON.stringify({labelId:item.labelId,name:item.name,activeIndex:activeIndex.value})
    proxy.navTo(`/pages/search/search?params=${params}`)
  }
  // 右上角搜索按钮点击事件
  onNavigationBarButtonTap(e =>{
    if(e.index === 0){
      proxy.navTo("/pages/search/search")
    }
  })
  
  const searchPageChangeLabel = (item)=>{
    if(props.infoValue.name !== item.name && props.infoValue.name !== item.categoryName){
      // 如果点击的是 不限 标签 则展示对应的分类名称
      state.searchPageParams.name = item.categoryName || item.name
      state.searchPageParams.id = item.labelId || null
      state.searchPageParams.categoryId = item.categoryId || null
      emit('searchByLabel',state.searchPageParams)
    }else{
      emit('searchByLabel',{active:true})
    }
  }
</script>

<style lang="scss" scoped>
  page{
    height: 100%;
  }
  .category{
    width: 100%;
    display: flex;
    height: 100%;
    
    .left{
      background-color: #F8F9FB;
      width: 260rpx;
      border-radius: 0 25rpx 25rpx 0;
      .title{
        view{
          color: #888;
          text-align: center;
          font-size: 30rpx;
          width: 100%;
          padding: 55rpx 30rpx;
          position: relative;
          &:before{
            position: absolute;
            content: '';
            width: 0rpx;
            height: 0rpx;
            border-right: 6rpx solid $mxg-text-color-blue;
            border-radius: 30rpx;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: .3s;
          }
        }
        .active{
          color: $mxg-text-color-blue;
          font-size: 33rpx;
          font-weight: bold;
          &:before{
            height: 50rpx;
          }
        }
      }
    }
    .right{
      background-color: #fff;
      padding-left: 15rpx;
      margin: 0;
      .tag{
        display: flex;
        flex-wrap: wrap;
        padding-top: 35rpx;
        padding-left: 10rpx;
        view{
          font-size: 25rpx;
          line-height: 60rpx;
          border: 1rpx solid #999;
          border-radius: 30rpx;
          min-width: 160rpx;
          text-align: center;
          padding: 0 5rpx;
          margin: 15rpx 5rpx;
        }
      }
    }
    
  }

</style>
